import { Vector2D } from '../utils/Vector2D';
import { MenuManager } from './MenuManager';
import { SkinSystem } from './SkinSystem';
import { MainMenu } from './menus/MainMenu';
import { GameModeMenu } from './menus/GameModeMenu';
import { SettingsMenu } from './menus/SettingsMenu';
import { SkinShopMenu } from './menus/SkinShopMenu';
import { BaseMenu } from './menus/BaseMenu';

interface ButtonStyle {
    scale: number;
    opacity: number;
    effect: 'none' | 'glow' | 'particle' | 'grayscale';
}

export class MenuRenderer {
    private canvas: HTMLCanvasElement;
    private ctx: CanvasRenderingContext2D;
    private menuManager: MenuManager;
    private animationFrame: number = 0;
    private lastRenderTime: number = 0;
    private readonly FPS: number = 30;
    constructor(canvas: HTMLCanvasElement, menuManager: MenuManager) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d')!;
        this.menuManager = menuManager;
        this.setupCanvas();
        this.setupEventListeners();
        this.startRenderLoop();
    }

    private setupCanvas(): void {
        // 设置画布尺寸为窗口大小
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;

        // 监听窗口大小变化
        window.addEventListener('resize', () => {
            this.canvas.width = window.innerWidth;
            this.canvas.height = window.innerHeight;
            this.render(); // 重新渲染
        });
    }

    private startRenderLoop(): void {
        const renderFrame = (timestamp: number) => {
            // 控制帧率
            if (timestamp - this.lastRenderTime >= 1000 / this.FPS) {
                this.render();
                this.lastRenderTime = timestamp;
            }
            this.animationFrame = requestAnimationFrame(renderFrame);
        };
        this.animationFrame = requestAnimationFrame(renderFrame);
    }

    public stopRenderLoop(): void {
        if (this.animationFrame) {
            cancelAnimationFrame(this.animationFrame);
        }
    }

    private render(): void {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.drawBackground();

        const menuInstance = this.menuManager.getCurrentMenuInstance();
        if (menuInstance) {
            menuInstance.render(this.ctx, this.canvas);
        }
    }

    private drawBackground(): void {
        // 绘制科技感背景
        this.ctx.fillStyle = '#1a1a1a';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        // 添加数据流动画效果
        this.drawDataFlowEffect();
    }

    private drawDataFlowEffect(): void {
        const time = Date.now() * 0.001;
        this.ctx.strokeStyle = 'rgb(132, 227, 255)';
        this.ctx.lineWidth = 1;
        this.ctx.globalAlpha = 0.3;

        for (let i = 0; i < 20; i++) {
            const x = Math.sin(time + i) * this.canvas.width;
            const speed = 2 + Math.sin(i) * 2;
            
            this.ctx.beginPath();
            this.ctx.moveTo(x, 0);
            this.ctx.lineTo(x + 50, this.canvas.height);
            this.ctx.stroke();
        }

        this.ctx.globalAlpha = 1;
    }



    private setupEventListeners(): void {
        this.canvas.addEventListener('click', (event) => {
            const rect = this.canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            const menuInstance = this.menuManager.getCurrentMenuInstance();
            let result = menuInstance?.handleClick(x, y, this.canvas);
            
            if (result) {
                if (result === 'back') {
                    this.menuManager.navigateBack();
                } else if (result === 'startGame') {
                    window.dispatchEvent(new CustomEvent('startGame'));
                } else if (result.startsWith('selectMode:')) {
                    const mode = result.split(':')[1];
                    window.dispatchEvent(new CustomEvent('selectGameMode', {
                        detail: { mode }
                    }));
                } else {
                    this.menuManager.navigateTo(result);
                }
            }
        });

        this.canvas.addEventListener('wheel', (event) => {
            const menuInstance = this.menuManager.getCurrentMenuInstance();
            if (menuInstance instanceof SkinShopMenu) {
                event.preventDefault();
                menuInstance.handleScroll(event.deltaY);
            }
        });
    }



    
}